import { ref } from 'vue'
import { useColumnStore } from '@/stores/columnStore'
import { storeToRefs } from 'pinia'
import { useCardStore } from '@/stores/cardStore'
import { useAsyncAxios } from '@/utils/asyncFuncStore'
import { useModalStore } from '@/stores/modalStore'
import { useRouter } from 'vue-router'
import { useMainIndexStore } from '@/stores/mainIndexStore'
import type { ColumnsList, CardData } from '@/types/loginType'
export default function () {
  const router = useRouter()
  const { listData, pageTotal } = storeToRefs(useColumnStore())
  const { select } = useColumnStore()
  const isSelected = ref('')
  // 点击事件
  const { changePage } = useColumnStore()
  const page = ref<HTMLDivElement | null>(null)
  const showPage = ref(true)
  const pageSize = ref(24)
  // 点击换页
  // 点击换页
  function clickPage(page: number) {
    changePage(page)
  }

  // 点击查询其下的文章...
  async function clickTo(item: ColumnsList) {
    // 跳转
    await clickTosearchArticle(item)
    // 路由跳转
    const { assignTitle } = useMainIndexStore()
    assignTitle({ msg: item.name, img: item.img })
    router.push({ name: 'columns', query: { key: item.id } })
  }

  // 点击查询专下的文章...
  async function clickTosearchArticle(item: ColumnsList) {
    const { assignCardData } = useCardStore()
    // 异步获取数据
    const { searchFollowigColumnsOrUsersArticle } = useAsyncAxios()
    const result = await searchFollowigColumnsOrUsersArticle(item.id)
    const { status, data } = result
    if (status === 200) {
      assignCardData(data as CardData[])
    } else {
      // 弹窗
      const { changeData } = useModalStore()
      changeData({ status: -1, data: { msg: '获取失败' } })
    }
  }

  return {
    listData,
    isSelected,
    page,
    showPage,
    pageSize,
    pageTotal,
    select,
    clickPage,
    clickTo
  }
}
